<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

<script>
  $(document).ready(
function() {
    $("input#autocomplete").autocomplete(
    {
    	source: ["${user}"]
    });
  });
  function AddMember(){
	  var user=document.getElementById("autocomplete").value;
	  var oSelField = document.getElementById("member");
	  for ( var i=0; i<oSelField.options.length;i++)
		  if(oSelField.options[i].value==user){
			Alert(oSelField.options[i].value+" is existed!");
			  return false;
		  }
		  var oOption = document.createElement("OPTION");
		  oSelField.options.add(oOption);
		  oOption.text = user;
		  oOption.value = user;
			var member="";
			for ( var i=0; i<oSelField.options.length;i++){
		 		member+= oSelField.options[i].value+"!";
		 		}
			   document.getElementById("txtmembers").value=member;
	 }

  function DeleteMember(theSel){
	  var selIndex = theSel.selectedIndex;
	  var i=0;
	  if (selIndex != -1) {
	    for(i=theSel.length-1; i>=0; i--)
	    {
	      if(theSel.options[i].selected)
	      {
	        theSel.options[i] = null;
	      }
	    }
	    if (theSel.length > 0) {
	      theSel.selectedIndex = selIndex == 0 ? 0 : selIndex - 1;
	    }    
	  }
		var member="";
		for ( var i=0; i<theSel.options.length;i++){
	 		member+= theSel.options[i].value+"!";}
		document.getElementById("txtmembers").value=member;
	}
function Save(){
	var member="";
	for ( var i=0; i<oSelField.options.length;i++){
 		member+= oSelField.options[i].value+"!";}
	   document.getElementById("txtmembers").value=member;
	   
	document.edit_groups.action="SaveGroups.html";
		document.edit_groups.submit();
}
  </script>
</head>
<body>
<form name="edit_groups" method="post" action="SaveGroups.html">

<table cellpadding="0" cellspacing="0" width="330" align="center" border="0">
	<tr class="table_title" align="center" >
		<td width="20%">Group Name:</td>	
		<td width="20%"><input type="text" id="groupname" name="groupname" value="${groupname}" ></td>
		<input type="hidden" id="groupid" name="groupid" value="${groupid}">
		<input type="hidden" id="txtmembers" name="txtmembers">
   <tr>
		<td width="20%">Members</td>	
		<td width="20%"><input type="text" id='autocomplete'></td>
		<td> <input type="button" value="Add" onclick="AddMember();">
		<td> <input type="button" value="Delete" onclick="DeleteMember(this.form.member);">
   <tr>
   <td width="20%">Group Members:</td>
   <td width="60%"><select  STYLE="width: 160px" id="member" name="member" multiple="multiple">
   <c:if test="${fn:length(data)>0}">
	<c:forEach var="x" begin="0" end="${fn:length(data)-1}" step="1" varStatus ="status">
			<option value="${data[x].USER_NAME}" id="${data[x].USER_NAME}"/>${data[x].USER_NAME}</option>
	</c:forEach>
	</c:if>
	</select>
	</td>
	</tr>
	<tr>
   <td width="20%"><input type="submit" value="Save"></td>
   <td width="60%"><input type="button" value="Cancel" onclick="Exit();">
   
</table>
</form>
</body>
</html>